import React, { useEffect } from "react";
import "./style.css";
import { Link } from "react-router-dom";
import { LikeOutlined } from "@ant-design/icons";

export default function IdeaItem({ idea }) {
  return (
    <div>
      <div className="idea-item">
        <ul>
          {idea.map((item) => (
            <li key={item.id}>
              <Link
                to={{
                  pathname: "/ideadetail",
                  search: `id=${item.id}`,
                }}
              >
                <img className="img" src={item.img} alt="" />
                <div className="idea-body">
                  <p>{item.content}</p>
                  <div className="ideaitem-footer flex">
                    <span className="flex">
                      <img src={item.userimg} alt="" className="user-img" />
                      <span
                        className="username"
                        style={{
                          "font-size": "1rem",
                        }}
                      >
                        {item.username}
                      </span>
                    </span>
                    <span>
                      <LikeOutlined />
                      <span className="guzhangnumber">
                        {item.guzhangnumber ? item.guzhangnumber : ""}
                      </span>
                    </span>
                  </div>
                </div>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
}
